<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>子账号管理</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <style>
        /* 最上方logo */
        #top{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 60px;
            background-color: #8fbbc3;
        }
        #logo{
            position: absolute;
            left: 0px;
            top: 3px;
            width: 177px;
        }
        #logo p{
            color: white;
            font-weight: 700;
            font-size: 24px;
            margin:0px;
            text-align: center;
            font-family: STXingkai;
        }
        /* 右上退出 */
        #exit{
            position: absolute;
            right: 10px;
            top: 18px;
        }
        #nav{
            position: absolute;
            left: 160px;
            top: 60px;
            width: 1360px;
            height: 35px;
        }
        /* 左侧导航栏 */
        #left{
            position: absolute;
            left: 0px;
            top: 60px;
            width: 161px;
            height: 92%;
            background-color: #989494;

        }
        .el-submenu .el-menu-item{
            font-size: 10px;
            min-width: 0;
            height: 30px;
            line-height: 10px;
            vertical-align:middle;
            padding-top: 10px;
        }

        /*上方导航栏标签样式*/
        a{
            text-decoration:none;
            width: 100%;
            height: 100%;
            display: block;
            color: white;
        }
        /*表格样式*/
        .form{
            width:1100px;
            height:350px;
            /*border:1px solid black;*/
            position: absolute;
            top:270px;
            left:180px;
        }
        /*分页样式*/
        .block{

        }
        /*子账号获取查询信息*/
        #sub1{
            position: absolute;
            left: 185px;
            top: 130px;
        }
        #sub2{
            position: absolute;
            left: 164px;
            top: 180px;
        }
        #but{
            position: absolute;
            left: 200px;
            top: 220px;
            width: 60%;
            height: 40px;
            background-color: #dcffff;
        }
        /* 设置表格内竖线颜色 */
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid black !important;
        }

        /* 设置表格内行线颜色 */
        .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid black !important;
        }
    </style>
</head>
<body>
<!-- 最上方logo -->
<div id="app">
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创OCP</span>
            </p>
            <p>
                <span>全渠道数字平台</span>
            </p>
        </div>
        <div id="exit">
            <!-- 下拉餐单 -->
            <el-dropdown>
                <span class="el-dropdown-link" style="color: white;">
                  <i class="el-icon-user-solid">admin</i>
                </span>
                <!-- 后续连数据库 -->
                <el-dropdown-menu trigger="click">
                    <el-dropdown-item>水热事业部</el-dropdown-item>
                    <el-dropdown-item>厨电事业部</el-dropdown-item>
                    <el-dropdown-item>热能事业部</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            &nbsp;
            <i class="el-icon-switch-button" style="color: white;"></i>
        </div>
    </div>
    <!-- 中间部分-->
        <!-- 上方导航栏 -->
        <div id="nav">
            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1"><a href="homepage.html">首页</a></el-menu-item>
                <el-menu-item index="2"><a href="information.html">会员信息</a></el-menu-item>
                <el-menu-item index="3"><a href="motifyPass.html">修改密码</a></el-menu-item>
                <el-menu-item index="4"><a href="AccountMeaasge.html">账户信息</a></el-menu-item>
                <el-menu-item index="5"><a href="subAccount.html">子账号管理</a></el-menu-item>
            </el-menu>
        </div>
    <!--子账号信息动态查询-->
    <div id="sub1">
        <!--获取用户名、状态、角色信息-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="用户名：">
             <el-input v-model="formInline.user" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <el-select v-model="formInline.state" placeholder="全部" clearable>
                    <el-option label="全部" value="all"></el-option>
                    <el-option label="启用" value="on"></el-option>
                    <el-option label="禁用" value="no"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色：">
                <el-select v-model="formInline.role" placeholder="电商部" clearable>
                    <el-option label="请选择" value="choose"></el-option>
                    <el-option label="总经办" value="gmo"></el-option>
                    <el-option label="生产部" value="pd"></el-option>
                    <el-option label="IT部" value="IT"></el-option>
                    <el-option label="电商部" value="ecd"></el-option>
                    <el-option label="采购部" value="pud"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
        <!--获取真实姓名、手机号码、性别信息-->
    <div id="sub2">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="真实姓名：">
                <el-input v-model="formInline.name" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号码：">
                <el-input v-model="formInline.phone" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别：">
                <el-select v-model="formInline.sex" placeholder="全部" clearable>
                    <el-option label="全部" value="both"></el-option>
                    <el-option label="男" value="man"></el-option>
                    <el-option label="女" value="female"></el-option>
                </el-select>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
            </el-form-item>
            </el-form-item>
        </el-form>
    </div>
    <!--子账号功能组件-->
    <div id="but">
        <el-row>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" @click="dialogFormVisible = true">新增</el-button>
            <el-button type="primary" icon="el-icon-user-solid" size="medium" @click="dialogForm1Visible = true">分配权限</el-button>
            <el-button type="primary" icon="el-icon-delete" size="medium" @click="deleted">删除</el-button>
            <el-button type="primary" icon="el-icon-video-play" size="medium" @click="open">启用</el-button>
            <el-button type="primary" icon="el-icon-remove" size="medium" @click="ban">禁用</el-button>
        </el-row>
        <!-- 新增信息功能 -->
        <el-dialog title="新增子账号" :visible.sync="dialogFormVisible">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="用户名：" prop="name">
                                    <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
                                </el-form-item>
                                <el-form-item label="真实姓名：" prop="realname">
                                    <el-input v-model="ruleForm.realname" placeholder="请输入真实姓名"></el-input>
                                </el-form-item>
                                <el-form-item label="角色：" prop="role">
                                    <el-select v-model="ruleForm.role" placeholder="请选择">
                                        <el-option label="总经办" value="gmo"></el-option>
                                        <el-option label="生产部" value="pd"></el-option>
                                        <el-option label="IT部" value="IT"></el-option>
                                        <el-option label="电商部" value="ecd"></el-option>
                                        <el-option label="采购部" value="pud"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="性别：" prop="sex">
                                    <el-radio-group v-model="ruleForm.sex">
                                        <el-radio label="男"></el-radio>
                                        <el-radio label="女"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="手机号码：" prop="phone">
                                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                                </el-form-item>
                                <el-form-item label="电子邮箱：" prop="email">
                                    <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
                                </el-form-item>
                                <el-form-item label="备注：" prop="desc">
                                    <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
        <!-- 修改子账号信息功能 -->
        <el-dialog title="修改子账号信息" :visible.sync="dialogForm2Visible">
            <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名：" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名：" prop="realname">
                    <el-input v-model="ruleForm.realname" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="角色：" prop="role">
                    <el-select v-model="ruleForm.role" placeholder="请选择">
                        <el-option label="总经办" value="gmo"></el-option>
                        <el-option label="生产部" value="pd"></el-option>
                        <el-option label="IT部" value="IT"></el-option>
                        <el-option label="电商部" value="ecd"></el-option>
                        <el-option label="采购部" value="pud"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别：" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone">
                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱：" prop="email">
                    <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm2')">保存</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 分配权限功能 -->
        <el-dialog title="分配权限" :visible.sync="dialogForm1Visible">
            <el-form :model="form">
                <el-form-item label="" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="水热事业部" name="type"></el-checkbox>
                        <el-checkbox label="厨电事业部" name="type"></el-checkbox>
                        <el-checkbox label="热能事业部" name="type"></el-checkbox>
                        <br>
                        <el-checkbox label="空气能事业部" name="type"></el-checkbox>
                        <el-checkbox label="长沙工程部" name="type"></el-checkbox>
                        <el-checkbox label="顺德工程部" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogForm1Visible = false">保 存</el-button>
                <el-button @click="dialogForm1Visible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
    <!--子账号管理表格-->
    <!--中间表格-->
    <div class="form">
        <template>
            <el-table :data="tableData" border style="border:1px solid darkgrey" size="mini" :fit="true"
                      :header-cell-style="{background:'darkgray',color:'#fff'}">
                <el-table-column type="selection"></el-table-column>
                <el-table-column type="index" label="序号"align="center"></el-table-column>
                <el-table-column prop="userName" label="用户名"align="center"></el-table-column>
                <el-table-column prop="realName" label="真实姓名"align="center"></el-table-column>
                <el-table-column prop="role" label="角色"align="center"></el-table-column>
                <el-table-column prop="sex" label="性别"align="center"></el-table-column>
                <el-table-column prop="mail" label="电子邮箱"align="center"></el-table-column>
                <el-table-column prop="phoneNumber" label="手机号码"align="center"></el-table-column>
                <el-table-column prop="state" label="状态"align="center"></el-table-column>
                <el-table-column prop="handle" label="操作"align="center">
                    <i class="el-icon-delete" @click="deleted"></i>
                    <i class="el-icon-key" @click="reseted"></i>
                    <i class="el-icon-edit" @click="dialogForm2Visible = true"></i>
                    <i class="el-icon-user" @click="dialogForm1Visible = true"></i>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="40"
                        layout="sizes, prev, pager, next, jumper"
                        :total="1000">
                </el-pagination>
            </div>
        </template>
        <!--分页组件-->
        <!--<template>-->
        <!--<div class="mypage">-->
        <!--<el-pagination hide-on-single-page background prev-text="上一页" next-text="下一页"-->
        <!--layout="prev, pager, next, jumper, total, sizes" :page-size="10" @current-change="currentChange"-->
        <!--@size-change="sizeChange" :page-sizes="[10, 15, 20] " :total=""></el-pagination>-->
        <!--</div>-->
        <!--</template>-->
    </div>
    <!-- 侧边导航栏 -->
    <div id="left">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
        >
            <el-submenu index="1">
                <template slot="title">
                    <span>订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">提交订单</el-menu-item>
                    <el-menu-item index="1-2">待处理订单</el-menu-item>
                    <el-menu-item index="1-3">采购订单</el-menu-item>
                    <el-menu-item index="1-4">零售订单列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <span>售后管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1"><a href="ChangeGoodsApply.html">退换货申请</a></el-menu-item>
                    <el-menu-item index="2-2"><a href="exchange.html">退换货订单列表</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <span>产品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">产品信息查询</el-menu-item>
                    <el-menu-item index="3-2">库存信息管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <span>会员信息</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1"><a href="information.html">会员信息</a></el-menu-item>
                    <el-menu-item index="4-2"><a href="motifyPass.html">修改密码</a></el-menu-item>
                    <el-menu-item index="4-3"><a href="AccountMeaasge.html">账号信息</a></el-menu-item>
                    <el-menu-item index="4-4"><a href="subAccount.html">子账号管理</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <span>设置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">网店设置</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</div>
</body>
<script type="module">
    let vm=new Vue({
        el:'#app',
        data() {
            return {
                dealerId:"1",
                //获取动态查询信息
                formInline: {
                    user: '',
                    state: '',
                },
                //新增信息
                ruleForm: {
                    name: '',
                    realname: '',
                    role: '',
                    sex: '',
                    phone: '',
                    email: '',
                    desc: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    realname: [
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    ],
                    role: [
                        { required: true, message: '请选择角色', trigger: 'change' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                },
                //修改子账号信息
                ruleForm2: {
                    name: '',
                    realname: '',
                    role: '',
                    sex: '',
                    phone: '',
                    email: '',
                    desc: ''
                },
                rules2: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    realname: [
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    ],
                    role: [
                        { required: true, message: '请选择角色', trigger: 'change' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                },
                //分配权限
                form: {
                    type: [],
                },
                dialogFormVisible: false,
                dialogForm1Visible: false,
                dialogForm2Visible: false,
                formLabelWidth: '120px',
                //表格
                activeIndex2: '5',
                tableData: [],
                //分页功能
                currentPage4: 4,
            };
        },
        created(){
            this.getSubAccount();
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            //新增信息保存
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('保存成功!');
                    } else {
                        console.log('保存失败!!');
                        return false;
                    }
                });
            },
            //新增信息重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //删除信息
            deleted() {
                this.$confirm('您确定要删除该子帐号吗?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //重置子账号密码
            reseted() {
                this.$confirm('您确定要重置该子帐号密码吗?', '重置密码提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '重置成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
            },
            //启用子账号
            open() {
                this.$confirm('您确定要启用该子帐号吗?', '启用子帐号提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '启用成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消启用'
                    });
                });
            },
            //禁用子账号
            ban() {
                this.$confirm('您确定要禁用该子账号吗?', '禁用子帐号提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '禁用成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消禁用'
                    });
                });
            },
            //分页功能
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            //获取子账号信息
            getSubAccount(){
                let url="http://localhost:8088/system/account/query";
                axios.post(url,this.dealerId)
                    .then(result=>{
                        if (result.data.code=="001"){
                            console.log(result.data.data);

                        }
                        else {
                            console.log(result.data.code);
                        }
                    })
            },
        },

    });


</script>
</html>
